<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <link href="<%=request.getContextPath()%>/resources/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<%=request.getContextPath()%>/resources/js/jQuery/jquery-2.1.4.min.js"></script>
    <script src="<%=request.getContextPath()%>/resources/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath()%>/resources/js/bootstrap/js/bootstrap-paginator.min.js"></script>
    <script>
        var PAGESIZE = 10;
        var options = {
            currentPage: 1,  //当前页数
            totalPages: 10,  //总页数，这里只是暂时的，后头会根据查出来的条件进行更改
            size: "normal",
            alignment: "center",
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "第一页";
                    case "prev":
                        return "前一页";
                    case "next":
                        return "后一页";
                    case "last":
                        return "最后页";
                    case "page":
                        return page;
                }
            },
            onPageClicked: function (e, originalEvent, type, page) {
                var userName = $("#textInput").val(); //取内容
                buildTable(userName, page, PAGESIZE);//默认每页最多10条
            }
        }
        function myFunction() {
//            var PAGESIZE = 10;
            var strPath = window.document.location.pathname;
            //           var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
            var url = strPath + "user/list"; //请求的网址
//            alert("数据：" + strPath + "\n状态：" + url);
            $.ajax({
                url: url,
                dataType: "json",
                async: false,
                success: function (data, status) {


                        var newoptions = {
                            currentPage: 1,  //当前页数
                            totalPages: data.pages == 0 ? 1 : data.pages,  //总页数
                            size: "normal",
                            alignment: "center",
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "第一页";
                                    case "prev":
                                        return "前一页";
                                    case "next":
                                        return "后一页";
                                    case "last":
                                        return "最后页";
                                    case "page":
                                        return page;
                                }
                            }
                        }
                        $('#bottomTab').bootstrapPaginator("setOptions", newoptions); //重新设置总页面数目

                        var dataList = data.list;
                        $("#tableBody").empty();//清空表格内容
                        if (dataList.length > 0) {
                            $(dataList).each(function () {//重新生成
                                $("#tableBody").append('<tr>');
                                $("#tableBody").append('<td>' + this.userId + '</td>');
                                $("#tableBody").append('<td>' + this.userName + '</td>');
                                $("#tableBody").append('<td>' + this.userAge + '</td>');
                                $("#tableBody").append('</tr>');
                            });
                        } else {
                            $("#tableBody").append('<tr><th colspan ="3"><center>查询无数据</center></th></tr>');
                        }

                    alert("总数据：" + data.total + "\n总页面：" + data.pages+ "\nlist：" + dataList.length);

                }
            });


        }

        //渲染完就执行
        $(function () {

            //生成底部分页栏
            $('#bottomTab').bootstrapPaginator(options);

            buildTable("", 1, 10);//默认空白查全部

            //创建结算规则
            $("#queryButton").bind("click", function () {
                var userName = $("#textInput").val();
                buildTable(userName, 1, PAGESIZE);
            });
        });
    </script>
</head>
<body>
<h2 id="demo">Hello World!</h2><br>

<div id="queryDiv">
    <input id="textInput" type="text" placeholder="请输入用户名">
    <button id="queryButton" class="btn btn-primary" type="button">查询</button>
</div>
<form id="form1">
    <table class="table table-bordered" id='tableResult'>
        <caption>查询用户结果</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>年龄</th>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
    <!-- 底部分页按钮 -->
    <div id="bottomTab"></div>
</form>

<input id="btn" type="button" value="查询" class="btn btn-primary" onclick="myFunction()"/>


</body>
</html>
